<template>
  <header id="header">
    <div class="header-content clearfix"> <a class="logo" href="#">wanmoon</a>
    <nav class="navigation" role="navigation">
        <ul class="primary-nav">
        <li><a href="#index">首页</a></li>
        <li><a href="#article">阅读</a></li>
        <li><a href="#about">专题</a></li>
        <li><a href="#Contact">穷疯</a></li>
        </ul>
    </nav>
    <a href="#" class="nav-toggle">Menu<span></span></a> </div>
  </header>
</template>

<script>

import $ from 'jQuery'

export default {
  name: 'Header',
  mounted () {
    const sections = $('section')
    const nav = $('nav[role="navigation"]')

    $(window).on('scroll', function () {
      // Header Scroll
      var scroll = $(window).scrollTop()

      if (scroll >= 50) {
        $('#header').addClass('fixed')
      } else {
        $('#header').removeClass('fixed')
      }

      // Page Scroll
      var curPos = $(this).scrollTop()
      sections.each(function () {
        var top = $(this).offset().top - 76
        var bottom = top + $(this).outerHeight()
        if (curPos >= top && curPos <= bottom) {
          nav.find('a').removeClass('active')
          nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active')
        }
      })
    })
    nav.find('a').on('click', function () {
      $('html, body').animate({
        scrollTop: 0
      }, 500)
    })

    // Mobile Navigation
    $('.nav-toggle').on('click', function () {
      $(this).toggleClass('close-nav')
      nav.toggleClass('open')
      return false
    })
    nav.find('a').on('click', function () {
      $('.nav-toggle').toggleClass('close-nav')
      nav.toggleClass('open')
    })
  }
}
</script>

<style>

</style>
